<template>
  <div>

    <el-form :inline="true" :model="queryParams" size="small" class="filter-form-inline">
      <el-row :gutter="40">
        <el-col :span="4">
          <el-form-item label="统计周期">
            <el-select v-model="queryParams.cycle" clearable style="width: 100%" placeholder="统计周期"
              @change="handlCycle">
              <el-option v-for="item in cycleData" :key="item.id" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="时间范围" style="width: 100%">
            <dateTime ref="dateTimeRef" :state="queryParams.cycle" @dateTime="dateTime" />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="开发进度" style="width: 100%">
            <el-select v-model="queryParams.progress" clearable style="width: 100%" placeholder="开发进度"
              @change="handlQueryParams">
              <el-option label="新注册终端" value="1" />
              <el-option label="待进货终端" value="2" />
              <el-option label="正式交易终端" value="3" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="产品名称" style="width: 100%">
            <el-select v-model="queryParams.productId" filterable remote reserve-keyword placeholder="请输入产品"
              :remote-method="handlProductData" @change="handlQueryParams">
              <el-option v-for="item in productList" :key="item.id" 
              :label="getProductName(item)"
               :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item style="width: 100%">
            <el-button class="border-btn" @click="handlReset">重置</el-button>
            <el-button type="primary" class="main-btn" @click="handlQueryParams">搜索</el-button>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'
import {crmStore} from '@CRM/store'
import {useRoute} from 'vue-router'

export default {
    name: 'Form',
    components: {
      dateTime: defineAsyncComponent(() => import('../../order/modules/dateTime.vue')),
    },
    setup(props, context) {
      const currentInstance = getCurrentInstance()
      const route = useRoute()
      const api = inject('api')
      var data = reactive({
        queryParams: {
          cycle: '1', // 统计周期 1 天 2 周 3 月 4 季度 5 年 6 自定义
          progress: '1', // 开发进度 1 新注册终端 2 待进货终端 3 正式交易终端
          start: null, //
          end: null, //	string
          productId: null,
        },
        cycleData: crmStore.getters['dictionary/getDictionary']['cycle'],
        dateTimeRef: null,
        productList: []
      })

      // 时间
      const dateTime = (val) => {
        data.queryParams.start = val.start_time
        data.queryParams.end = val.end_time
        handlQueryParams()
      }

      const handlCycle = () => {
        data.dateTimeRef.handlRemove()
        handlQueryParams()
      }

      const handlReset = () => {
        data.queryParams = {
          cycle: '1', // 统计周期 1 天 2 周 3 月 4 季度 5 年 6 自定义
          progress: '1', // 开发进度 1 新注册终端 2 待进货终端 3 正式交易终端
          start: null, //
          end:null,//	stringnew Dat
          productId: null,
        }
        let a =  new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 6)
        let b = currentInstance.proxy.dateFormat('yyyy-mm-dd',  new Date()) + ' ' + '23:59:59'
        let c = currentInstance.proxy.dateFormat('yyyy-mm-dd', a) + ' ' + '00:00:00'
        data.queryParams.start = handlHours(c)
        data.queryParams.end = handlHours(b)
        handlQueryParams()
      }

      const handlHours = (val) => {
        var date = new Date(val)
        var hours = date.getHours() + 8
        date.setHours(hours)
        const str = date.toISOString().replace('.000Z', '+08:00')
        return str
      }

      const handlQueryParams = () => {
        context.emit('change', data.queryParams)
      }

      // 获取产品
      const handlProductData = async (queryString) => {
        const res = await api.developCustomer.PRODUCTID(queryString)
        if (res.code === 0) {
          data.productList = res.data.list
        }
      }

      const handlQueryType = () => {
        if (route.query.type) {
          switch (route.query.type) {
            case '1':
              data.queryParams.cycle = '1'
              break
            case '2':
              data.queryParams.cycle = '3'
              break
            case '3':
              data.queryParams.cycle = '3'
              break
            case '4':
              data.queryParams.cycle = '3'
              break
          }
        }
      }

      onMounted(() => {
        handlProductData()
        handlQueryType()
      })

      return {
        ...toRefs(data),
        handlCycle,
        handlProductData,
        dateTime,
        handlQueryParams,
        handlReset,
        handlQueryType,
        handlHours
      }
    }
  }
</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>